<template>
	<view>
		<view class="order-nav u-flex">
			<view class="nav-item u-flex-col u-flex-1 u-row-center u-col-center" v-for="nav in groupState" :key="nav.id"
				@tap="onNav(nav.id)">
				<view class="item-title" :class="{ 'item-title-active': stateId === nav.id }">{{ nav.title }}</view>
				<text class="nav-line" :class="{ 'line-active': stateId === nav.id }"></text>
			</view>
		</view>
		<view class="data" v-for="item in joinList" :key="item.id" v-if="stateId=='1'">
			<view class="dataitem">
				<view class="u-flex">
					<view class="time u-flex-1">{{item.createtime_text}}</view>
					<view v-if="item.state==0" class="status">发送中</view>
					<view v-else-if="item.state==1" class="status">已收货</view>
				</view>
				<view class="u-flex" style="margin-top: 16rpx;">
					<view class="u-flex-1">
						<image style="width: 160rpx;height: 160rpx;" :src="item.image">
						</image>
					</view>
					<view class="title u-flex-2">{{item.title}}</view>
					<view class="look u-flex">
						<view class="num"><text>X</text><text>{{item.num?item.num:0}}</text></view>
						<view class="chakan" @tap="jump('/pages/index/courtesy/detail',{id:item.id})">去查看</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 生日礼遇 -->
		<view class="bath-data" style="" v-if="stateId=='2'">
			<view class="bath-dataitem" v-for="item in birthdayList" :key="item.id">
				<view style="display: flex;flex-direction: row;align-items: center;height: 100%;">
					<view class="juan-num"><text>{{item.num}}</text><text>张</text></view>
					<view class="u-flex-1">
						<view class="juan-title">{{item.title}}</view>
						<view class="juan-time">{{item.createtime_text}}</view>
					</view>
					<view v-if="item.status==0" class="juan-btn" @tap="jump('/pages/goods/list')">
						去使用
					</view>
					<view v-else-if="item.status==1" class="juan-btn" style="background: #B5B5B5">
						已使用
					</view>
				</view>
			</view>
		</view>
		<!-- 季度礼遇 -->
		<view class="data" v-for="item in QuarterList" :key="item.id" v-if="stateId=='3'">
			<view class="dataitem">
				<view class="u-flex">
					<view class="time u-flex-1">{{item.createtime_text}}</view>
					<view v-if="item.state==0" class="status">发送中</view>
					<view v-else-if="item.state==1" class="status">已收货</view>
				</view>
				<view class="u-flex" style="margin-top: 16rpx;">
					<view class="u-flex-1">
						<image style="width: 160rpx;height: 160rpx;" :src="item.image">
						</image>
					</view>
					<view class="title u-flex-2">{{item.title}}</view>
					<view class="look u-flex">
						<view class="num"><text>X</text><text>{{item.num?item.num:0}}</text></view>
						<view class="chakan">去查看</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 福包礼遇 -->
		<view class="data" v-for="item in packageList" :key="item.id" v-if="stateId=='4'">
			<view class="dataitem">
				<view class="u-flex">
					<view class="time u-flex-1">{{item.createtime_text}}</view>
					<view v-if="item.state==0" class="status">发送中</view>
					<view v-else-if="item.state==1" class="status">已收货</view>
				</view>
				<view class="u-flex" style="margin-top: 16rpx;">
					<view class="u-flex-1">
						<image style="width: 160rpx;height: 160rpx;" :src="item.image">
						</image>
					</view>
					<view class="title u-flex-2">{{item.title}}</view>
					<view class="look u-flex">
						<view class="num"><text>X</text><text>{{item.num?item.num:0}}</text></view>
						<view class="chakan">去查看</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务礼遇 -->
		<view class="data" v-for="item in serviceList" :key="item.id" v-if="stateId=='5'">
			<view class="dataitem">
				<view class="u-flex">
					<view class="time u-flex-1">{{item.createtime_text}}</view>
					<view v-if="item.state==0" class="status">{{item.state_text}}</view>
					<view v-else-if="item.state==2" style="color: #8E8E8E;" class="status">{{item.state_text}}</view>
					<view v-else-if="item.state==1" class="status">{{item.state_text}}</view>
				</view>
				<view class="u-flex" style="margin-top: 16rpx;">
					<view class="u-flex-1">
						<image style="width: 160rpx;height: 160rpx;" :src="item.image">
						</image>
					</view>
					<view class="fw-zhong u-flex-2">
						<view class="fw-zhong-title">{{item.title}}</view>
						<view v-if="item.state==1" class="endtime"><text>到期时间：</text>
						<text v-if="userInfo.member_level==0">长期</text>
						<text v-else>{{ $u.timeFrom(item.usetimeend) }}</text>
						</view>
					</view>
					<view class="look u-flex">
						<view class="num"><text>X</text><text>{{item.num?item.num:0}}</text></view>
						<view class="chakan"
							@tap="jump('/pages/index/courtesy/serviceCourtesy',{id:item.id,state:item.state})">去查看
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 缺省页 -->
		<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无数据~"></shopro-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />

	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				isEmpty: false,
				groupState: [{
						id: 1,
						title: '入会礼遇'
					},
					{
						id: 2,
						title: '生日礼遇	'
					},
					{
						id: 3,
						title: '季度礼遇'
					},
					{
						id: 4,
						title: '福包礼遇'
					},
					{
						id: 5,
						title: '服务礼遇'
					},
				],
				stateId: 1,
				list: [{
						id: 0,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '0',
						time: '2022-05-25'
					},
					{
						id: 1,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '1',
						time: '2022-05-25'
					},
					{
						id: 2,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '0',
						time: '2022-05-25'
					},
					{
						id: 3,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '1',
						time: '2022-05-25'
					},
				],
				fwlist: [{
						id: 0,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '0',
						time: '2022-05-25',
						endtime: ''
					},
					{
						id: 1,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '1',
						time: '2022-05-25',
						endtime: '30天'
					},
					{
						id: 2,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '0',
						time: '2022-05-25',
						endtime: '永久'
					},
					{
						id: 3,
						title: '礼遇名称',
						image: '',
						num: '1',
						status: '2',
						time: '2022-05-25',
						endtime: ''
					},
				],
				joinList: [],
				QuarterList: [],
				packageList: [],
				birthdayList: [],
				serviceList: [],
				page: 1,
				lastPage: 1,
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		mounted() {
			this.getJoin()
		},
		methods: {
			// 获取入会礼遇列表
			getJoin() {
				let that = this;
				that.loadStatus = 'loading';
				let data = {
					type: 2,
					page: that.page
				}
				that.$https('sendgoods.lists', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.joinList = res.data.data
						that.isEmpty = !that.joinList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.page < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			// 获取季度礼遇列表
			getQuarter() {
				let that = this;
				that.loadStatus = 'loading';
				let data = {
					type: 3,
					page: that.page
				}
				that.$https('sendgoods.lists', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.QuarterList = res.data.data
						that.isEmpty = !that.QuarterList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.page < res.data.last_page ? 'loadmore' : 'nomore';

					}
				});
			},
			// 获取福包礼遇列表
			getPackage() {
				let that = this;
				that.loadStatus = 'loading';
				let data = {
					type: 3,
					page: that.page
				}
				that.$https('sendgoods.lists', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.packageList = res.data.data
						that.isEmpty = !that.packageList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.page < res.data.last_page ? 'loadmore' : 'nomore';

					}
				});
			},
			//获取生日礼遇列表
			getBirthday() {
				let that = this;
				that.loadStatus = 'loading';
				let data = {
					type: 4,
					page: that.page
				}
				that.$https('sendgoods.shengriLists', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.birthdayList = res.data
						that.isEmpty = !that.birthdayList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.page < res.data.last_page ? 'loadmore' : 'nomore';
						console.log('that.birthdayList', that.birthdayList)

					}
				});
			},
			//获取服务礼遇列表
			getService() {
				let that = this;
				that.loadStatus = 'loading';
				let data = {
					page: that.page
				}
				that.$https('sendgoods.serviceLists', data, '请求中...').then(res => {
					if (res.code === 1) {
						console.log('res', res)
						that.loadStatus = that.page < res.data.last_page ? 'loadmore' : 'nomore';
						that.lastPage = res.data.last_page;
						that.serviceList = res.data.data
						that.isEmpty = !that.serviceList.length;
						console.log('that.serviceList', that.serviceList)

					}
				});
			},
			// 查看物流
			onExpress(orderId) {
				let that = this;
				that.$http('order.expressList', {
					order_id: orderId
				}).then(res => {
					if (res.code === 1) {
						if (res.data.length == 1) {
							this.jump('/pages/order/express/express-detail', {
								orderId: orderId,
								expressId: res.data[0].id
							});
						} else if (res.data.length > 1) {
							this.jump('/pages/order/express/express-list', {
								orderId: orderId
							});
						} else {
							that.$u.toast('暂无包裹~');
						}
					}
				});
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			onNav(id) {
				console.log('111', id)
				this.page = 1
				this.isEmpty = false
				this.loadStatus = "loadmore"
				this.lastPage = 1
				if (this.stateId !== id) {
					this.stateId = id;
					console.log('11', this.stateId)
				}
				if (id == 1) {
					this.getJoin()
				} else if (id == 2) {
					this.getBirthday()
				} else if (id == 3) {
					this.getQuarter()
				} else if (id == 4) {
					this.getPackage()
				} else if (id == 5) {
					this.getService()
				}

			}
		},
		// 触底加载更多
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1;
				var id = this.stateId
				if (id == 1) {
					this.getJoin()
				} else if (id == 2) {
					this.getBirthday()
				} else if (id == 3) {
					this.getQuarter()
				} else if (id == 4) {
					this.getPackage()
				} else if (id == 5) {
					this.getService()
				}
			}
		},
	}
</script>
<style>
	page {
		background-color: #ffffff !important;
	}
</style>
<style lang="scss">
	.order-nav {
		background: #fff;
		height: 80rpx;
		border-bottom: 1px solid #E5E5E5;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				line-height: 76rpx;
			}

			.item-title-active {
				color: #333333;
				font-weight: bold;
			}

			.nav-line {
				width: 80rpx;
				height: 4rpx;
				background: #fff;


			}

			.line-active {
				background: black;
			}
		}
	}

	.chakan {
		width: 140rpx;
		height: 44rpx;
		background: #010101;
		border-radius: 26rpx;
		color: #ffffff;
		line-height: 44rpx;
		text-align: center;
	}

	.dataitem {
		height: 250rpx;
		border-bottom: 1px solid #E5E5E5;
		margin-top: 14rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}

	.look {
		flex-direction: column;
		height: 160rpx;
		align-items: flex-end;
		justify-content: space-around;
	}

	.time {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.status {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FC5619;
	}

	.fw-zhong-title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #010101;
	}

	.bath-dataitem {
		width: 686rpx;
		height: 160rpx;
		border-bottom: 1px solid #E5E5E5;
		// background: #ffffff;
		margin-top: 16rpx;
		background-image: url('../../../static/images/liyu1.png');
		background-size: 100%;
		position: relative;
	}

	.bath-data {
		background-color: #F5F5F5;
		height: 100vh;
		padding: 16rpx 32rpx 32rpx 32rpx;
	}

	.juan-num {
		flex: 0.8;
		padding-left: 64rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.juan-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #010101;
	}

	.juan-time {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
		margin-top: 16rpx;
	}

	.juan-btn {
		flex: 0.7;
		width: 136rpx;
		height: 44rpx;
		background: #010101;
		border-radius: 26rpx;
		text-align: center;
		line-height: 44rpx;
		color: #ffffff;
	}

	.fw-zhong {
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.endtime {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
	}
</style>
